<template>
  <div class="financial-application-page">
    <div class="content-area">
      <van-tabs v-model:active="activeTab">
        <van-tab title="申请类型">
          <!-- 申请类型选择 -->
          <van-cell-group inset title="常用申请类型">
            <van-cell 
              v-for="type in applicationTypes" 
              :key="type.id"
              :title="type.name"
              is-link
              @click="onSelectType(type)"
            >
              <template #icon>
                <van-icon :name="type.icon" class="cell-icon" :style="{color: type.color}" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-tab>
        
        <van-tab title="我的申请">
          <!-- 我的申请列表 -->
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell-group inset v-if="myApplications.length > 0">
                <van-cell 
                  v-for="item in myApplications" 
                  :key="item.id"
                  :title="item.typeName"
                  :label="`申请时间: ${item.applyTime}`"
                  is-link
                  @click="viewDetail(item)"
                >
                  <template #value>
                    <van-tag :type="getStatusType(item.status)">{{ item.statusText }}</van-tag>
                  </template>
                </van-cell>
              </van-cell-group>
              <van-empty v-else description="暂无申请记录" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar, Tab, Tabs, Cell, CellGroup, Icon, List, PullRefresh, Empty, Tag, Toast } from 'vant'
import 'vant/es/toast/style'

export default {
  name: 'FinanceFinancialApplication',
  components: {
    vanNavBar: NavBar,
    vanTab: Tab,
    vanTabs: Tabs,
    vanCell: Cell,
    vanCellGroup: CellGroup,
    vanIcon: Icon,
    vanList: List,
    vanPullRefresh: PullRefresh,
    vanEmpty: Empty,
    vanTag: Tag
  },
  setup() {
    const router = useRouter()
    const activeTab = ref(0)
    
    // 申请类型数据
    const applicationTypes = [
      { id: 1, name: '培训费申请', icon: 'certificate', path: '/new/finance/training-apply', color: '#1989fa' },
      { id: 2, name: '会议费申请', icon: 'friends-o', path: '/new/finance/meeting-apply', color: '#07c160' },
      { id: 3, name: '福利费申请', icon: 'gift-o', path: '/new/finance/welfare-apply', color: '#ee0a24' },
      { id: 4, name: '招待费申请', icon: 'user-o', path: '/new/finance/hospitality-apply', color: '#ff976a' },
      { id: 5, name: '办公用品申请', icon: 'notes-o', path: '/new/finance/office-apply', color: '#7232dd' }
    ]
    
    // 申请列表状态
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    
    // 模拟申请数据
    const myApplications = ref([
      { 
        id: 1, 
        typeName: '培训费申请', 
        applyTime: '2024-04-01', 
        status: 'pending', 
        statusText: '审批中' 
      },
      { 
        id: 2, 
        typeName: '会议费申请', 
        applyTime: '2024-03-15', 
        status: 'approved', 
        statusText: '已批准' 
      },
      { 
        id: 3, 
        typeName: '办公用品申请', 
        applyTime: '2024-03-10', 
        status: 'rejected', 
        statusText: '已拒绝' 
      }
    ])
    
    // 选择申请类型处理函数
    const onSelectType = (type) => {
      router.push(type.path)
    }
    
    // 查看申请详情处理函数
    const viewDetail = (item) => {
      Toast(`查看申请ID: ${item.id} (功能开发中)`)
      // router.push(`/new/finance/application-detail/${item.id}`)
    }
    
    // 获取状态类型
    const getStatusType = (status) => {
      const types = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
      }
      return types[status] || 'default'
    }
    
    // 加载更多处理函数
    const onLoad = () => {
      setTimeout(() => {
        loading.value = false
        finished.value = true // 模拟没有更多数据
      }, 1000)
    }
    
    // 下拉刷新处理函数
    const onRefresh = () => {
      finished.value = false
      loading.value = true
      
      setTimeout(() => {
        refreshing.value = false
        loading.value = false
        finished.value = true // 模拟没有更多数据
      }, 1000)
    }
    
    const goBack = () => router.back()
    
    return {
      activeTab,
      applicationTypes,
      myApplications,
      loading,
      finished,
      refreshing,
      onLoad,
      onRefresh,
      onSelectType,
      viewDetail,
      getStatusType,
      goBack
    }
  }
}
</script>

<style scoped>
.financial-application-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}
.content-area {
  padding-bottom: 20px;
}
.cell-icon {
  margin-right: 8px;
  font-size: 18px;
}
</style> 